import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Table, Button, Select, DatePicker } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';

import { getParamUrl } from '../../utils/formatDataSource';

@connect(({ role, loading }) => ({
  role,
  loading: loading.models.role,
}))
class TeacherTime extends PureComponent {
  state = {
    campus: '-1',
    startTime: '',
    endTime: '',
    users: [],
  };

  componentDidMount = () => {
    const { dispatch } = this.props;

    dispatch({
      type: 'role/campus',
    });

    dispatch({
      type: 'role/teacherList',
    });
  };

  getColumns = () => {
    return [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: '普通班课',
        dataIndex: 'cTime',
        key: 'vv1',
        align: 'center',
      },
      {
        title: '1V2班课',
        dataIndex: '1v2Time',
        key: 'v1',
        align: 'center',
      },
      {
        title: '1V3班课',
        dataIndex: '1v3Time',
        key: 'cTime',
        align: 'center',
      },
      {
        title: '薪酬',
        dataIndex: 'salary',
        key: 'salary',
        align: 'center',
      },
      {
        title: '导出明细',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <span>
              <Link to={`/lesson/person/detail?userId=${record.id}`}>导出</Link>
            </span>
          );
        },
      },
    ];
  };
  getData = () => {
    return [
      {
        id: '1',
        key: '1',
        name: '胡彦斌',
        vv1: 12,
        v1: 19,
        cTime: 11,
        salary: 1000.0,
      },
      {
        id: '2',
        key: '2',
        name: '胡彦斌',
        vv1: 12,
        v1: 19,
        cTime: 11,
        salary: 1000.0,
      },
    ];
  };

  campusSelect = campus => {
    const { startTime, endTime } = this.state;

    this.searchParam(campus, startTime, endTime);
  };

  rangeChange = (date, dateString) => {
    const startTime = dateString[0];
    const endTime = dateString[1];

    const { campus } = this.state;

    this.searchParam(campus, startTime, endTime);
  };

  searchParam = (campus, startTime, endTime) => {
    const { dispatch } = this.props;
    const param = {};
    if (campus !== '-1') {
      param.campusId = campus;
    }
    if (startTime !== '') {
      param.startTime = startTime;
    }
    if (endTime !== '') {
      param.endTime = endTime;
    }
    dispatch({
      type: 'role/teacherList',
      payload: {
        ...param,
      },
    });
    this.setState({
      campus,
      startTime,
      endTime,
    });
  };

  tablePageChange = e => {};

  render() {
    const Option = Select.Option;

    const { RangePicker } = DatePicker;

    const { campus, teachers } = this.props.role;

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          校区：
          <Select value={this.state.campus} style={{ width: 120 }} onChange={this.campusSelect}>
            <Option value="-1">全部校区</Option>
            {campus.map((e, i) => {
              return (
                <Option value={e.id} key={e.id}>
                  {e.name}
                </Option>
              );
            })}
          </Select>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 统计时间：<RangePicker
            onChange={this.rangeChange}
          />
          <br />
          <br />
          <Table
            dataSource={teachers.data}
            columns={this.getColumns()}
            bordered={true}
            pagination={{
              onChange: this.tablePageChange,
              showTotal() {
                return (
                  <span>
                    共 <span style={{ color: '#1893ab' }}>{teachers.total}</span> 道
                  </span>
                );
              },
            }}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default TeacherTime;
